<template>
	<div class="home backg_qiangray" id="scroll" v-cloak>
		<div style="position: relative;width: 300px;margin-left: 100px;">
			<div class="scroll" style="position: absolute;right: 0;top: 0;height: 100%;width: 10px;background-color: black;">
				<div id="scroll__" style="position: absolute;right: 0;top: 0;height:100px;width: 10px;background-color: red;border-radius: 3px;"></div>
			</div>
			<!--内容区域-->
			<div class="test">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				length:50
			}
		},
		activated(){
			
        },
		mounted: function() {
			var hidden = setTimeout(function() {
				$('.scroll').hide()
			}, 1000)
			drag('scroll__')
			function drag(obj) {
				$('.scroll div').css({
					'height': $('.test').height() * $('.test').height() / $('.test div').height() + 'px'
				})
				if(typeof obj == "string") {
					var obj = document.getElementById(obj);
					//					obj.orig_index = obj.style.zIndex;
					//设置当前对象永远显示在最上层
				}
				console.log(obj)
				obj.onmousedown = function(a) {
					console.log(a)
					window.clearTimeout(hidden)
				
					//鼠标按下
					this.style.cursor = "move";
					//设置鼠标样式
					this.style.zIndex = 1000;
					var d = document;
					if(!a) a = window.event;
					//按下时创建一个事件
					var x = a.clientX - document.body.scrollLeft - obj.offsetLeft;
					//x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距
					var y = a.clientY - document.body.scrollTop - obj.offsetTop;
					//y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距
					d.onmousemove = function(a) { //鼠标移动
						
						if(!a) a = window.event; //移动时创建一个事件
						console.log(a.clientY + document.body.scrollTop - y)
						obj.style.left = a.clientX + document.body.scrollLeft - x;
						
						var top = a.clientY + document.body.scrollTop - y 
						if(top<0){
							top=0
						}
						var p_h = $('.scroll').height()
						var c_h = $('#scroll__').height()
						if(top>p_h-c_h){
							top = p_h-c_h
						}
						
						var p_h = $('.test').height()
				var c_h = $('.test div').height()
						obj.style.top = top + 'px';
						var ab_top = top / p_h * c_h 
						console.log(ab_top)
						var top = $('.test').scrollTop(ab_top)
						
						
					}
					d.onmouseup = function() { //鼠标放开
						document.onmousemove = null;
						document.onmouseup = null;
						obj.style.cursor = "normal"; //设置放开的样式
						obj.style.zIndex = obj.orig_index;
						hidden = setTimeout(function() {
					$('.scroll').hide()
				}, 1000)
					}
				}
			}

			

			var scrollFunc = function(e) {
				e = e || window.event;
				var p_h = $('.test').height()
				var c_h = $('.test div').height()
				var top = $('.test').scrollTop()
				$('.scroll').show()
				if(scrollDir(e)) {
					top = top - 30
					if(top < 0) {
						top = 0
					}
				} else {
					//向下
					top = top + 20
					if(top > c_h - p_h) {
						top = c_h - p_h
					}

				}
				var ab_top = top / c_h * p_h + 'px'
				$('.scroll div').css({
					'top': ab_top,
					'height': p_h * p_h / c_h + 'px'
				})
				console.log(top, ab_top)
				$('.test').scrollTop(top)
				console.log(p_h, c_h)

				console.log(e.wheelDelta)

				console.log(top)
				window.clearTimeout(hidden)
				hidden = setTimeout(function() {
					$('.scroll').hide()
				}, 1000)

			}
			//注册事件	
			var p_h = $('.test').height()
				var c_h = $('.test div').height()
			if(c_h>p_h){
				alert()
				window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
			}
			

			function scrollDir(e) {
				if(e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件               
					if(e.wheelDelta > 0) { //当滑轮向上滚动时  
						return 1;
					}
					if(e.wheelDelta < 0) { //当滑轮向下滚动时  
						return 0;
					}
				} else if(e.detail) { //Firefox滑轮事件  
					if(e.detail > 0) { //当滑轮向上滚动时  
						return 1;
					}
					if(e.detail < 0) { //当滑轮向下滚动时  
						return 0;
					}
				}
			}
		},
		methods: {

		}
	}
</script>
<style lang="less">
#scroll{
	padding-top: 100px;
	.test {
				height: 300px;
				width: 300px;
				/*border: 1px solid black;*/
				box-shadow: 0 0 1px 0 black;
				
				overflow: hidden;
				position: relative;
			}
			
			.test div {
				/*height: 500px;*/
				/*background-color: red;*/
			}
			
			p {
				display: block;
				height: 20px;
				margin: 0;
			}
			
			.scroll {
				display: none;
				>div {
					position: absolute;
					left: 0;
					top: 0;
					transition: tr;
				}
			}
}
			
</style>